<template>
  <div>
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item class="swipe" style="background: yellow"><img src="" class="swipe-img"></van-swipe-item>
      <van-swipe-item class="swipe" style="background: red"><img src="" class="swipe-img"></van-swipe-item>
      <van-swipe-item class="swipe" style="background: dodgerblue"><img src="" class="swipe-img"></van-swipe-item>
      <van-swipe-item class="swipe" style="background: yellow"><img src="" class="swipe-img"></van-swipe-item>
    </van-swipe>
    <van-row class="showBox" type="flex" justify="space-around">
      <router-link to="/videoTraining" class="showBox1 " span="4" tag="div"><img src=""><span class="shoutex">视频训练</span></router-link>
      <router-link to="/trainingprogram" class="showBox1 " span="4" tag="div"><img src=""><span class="shoutex">训练计划</span></router-link>
      <router-link to="/freetraining" class="showBox1 " span="4" tag="div"><img src=""><span class="shoutex">自由训练</span></router-link>
      <router-link to="/trainingcamp" class="showBox1 " span="4" tag="div"><img src=""><span class="shoutex">训练营</span></router-link>
    </van-row>
    <div class="plan">
      <div class="plan-box">
        <h2>跟着计划训练</h2>
        <p>训练计划</p>
      </div>
      <div class="swiper-container swiper1">
        <div class="swiper-wrapper">

            <router-link to="" class="swiper-slide">
              <img src="">
            </router-link>
          <router-link to="" class="swiper-slide">
            <img src="">
          </router-link>
          <router-link to="" class="swiper-slide">
            <img src="">
          </router-link>
        </div>
      </div>
    </div>
    <div class="video-exercises">
      <h2>跟着视频练习</h2>
      <div>
        <p>为您推荐</p>
        <div class="swiper-container swiper2">
          <div class="swiper-wrapper">
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
          </div>
        </div>
      </div>
      <div>
        <p>减肥燃脂</p>
        <div class="swiper-container swiper2">
          <div class="swiper-wrapper">
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
          </div>
        </div>
      </div>
      <div>
        <p>减肥燃脂</p>
        <div class="swiper-container swiper2">
          <div class="swiper-wrapper">
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
          </div>
        </div>
      </div>
      <div>
        <p>腹肌塑造</p>
        <div class="swiper-container swiper2">
          <div class="swiper-wrapper">
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
          </div>
        </div>
      </div>
      <div>
        <p>瑜伽专题</p>
        <div class="swiper-container swiper2">
          <div class="swiper-wrapper">
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
            <router-link to="/item" class="swiper-slide"><img src="" ></router-link>
          </div>
        </div>
      </div>
      <div>
        <p>教练专区</p>
          <div class="swiper-container swiper3">
        <div class="swiper-wrapper">
          <router-link class="swiper-slide" to="/coach"><img src="" ></router-link>
          <router-link class="swiper-slide" to="/coach"><img src="" ></router-link>
          <router-link class="swiper-slide" to="/coach"><img src="" ></router-link>
          <router-link class="swiper-slide" to="/coach"><img src="" ></router-link>

        </div>
      </div>
      </div>
      <div class="morebox">
         <van-button type="default" round class="morebtn" to="/d-video"> 全部训练视频 &nbsp > </van-button>
      </div>
    </div>
   <van-row class="self-training">
     <h2 class="pdleft">自由训练</h2>
     <van-row >
       <p class="pdleft">工具</p>
       <van-row class="tool vnctop" type="flex" justify="space-around">
         <router-link to="/activek" class="vanc" span="6" tag="div"><van-icon name="orders-o" size="24px" tag="p"/><p>动作库</p></router-link></router-link>
         <router-link to="/customtraining" class="vanc" span="6" tag="div"><van-icon name="send-gift-o"  size="24px" tag="p"/><p>自定义训练</p></router-link></router-link>
         <router-link to="/mtime" class="vanc" span="6" tag="div"><van-icon name="clock-o"  size="24px" tag="p"/><p>计时器</p></router-link>
       </van-row>
     </van-row>
     <van-row>
       <p class="pdleft">部位</p>
       <van-row class="position  vnctop" >
       <van-row type="flex" justify="space-around">
         <router-link class="vanc" span="6" tag="div"  to="/freetra"><p>胸部</p></router-link>
         <van-col class="vanc " span="6" tag="a"><p>背部</p></van-col>
         <van-col class="vanc" span="6" tag="a"><p>肩部</p></van-col>
       </van-row>
       <van-row type="flex" justify="space-around">
         <van-col class="vanc midmag"  span="6" tag="a" ><p>手臂</p></van-col>
         <van-col class="vanc midmag" span="6" tag="a"><p>腿部</p></van-col>
         <van-col class="vanc midmag" span="6" tag="a"><p>臀部</p></van-col>
       </van-row >
       <van-row type="flex" justify="space-around">
         <van-col class="vanc" span="6" tag="a" ><p>腹部</p></van-col>
         <van-col class="vanc" span="6" tag="a"><p>全身</p></van-col>
         <van-col class="vanc" span="6" tag="a"><p>拉伸</p></van-col>
       </van-row>
     </van-row>
     </van-row>
     <van-row>
       <p class="pdleft">时长</p>
       <van-row class="time  vnctop" >
         <van-row type="flex" justify="space-around">
         <van-col class="vanc" span="6" tag="a" ><p><10分钟</p></van-col>
         <van-col class="vanc " span="6" tag="a"><p>10-20分钟</p></van-col>
         <van-col class="vanc" span="6" tag="a"><p>20-30分钟</p></van-col>
        </van-row>
       <van-row type="flex" justify="space-around">
         <van-col class="vanc midmag" span="6" tag="a" ><p>>30分钟</p></van-col>
         <van-col span="6" style="height:26px ;width: 109px"></van-col>
         <van-col span="6"  style="height:26px ;width: 109px"></van-col>
       </van-row>
     </van-row>
     </van-row>
    </van-row>
  </div>
</template>

<script>

  import 'swiper/dist/css/swiper.css'
  import swiper from 'swiper';

  export default {
    name:'Recommend',
    data(){
      return{

      }
    },
    methods:{
      onChange(index) {

      },
    },
    mounted(){
      new swiper('.swiper1', {
        slidesPerView :'auto',
        freeModeMomentum : false,
        spaceBetween: 21,
        freeMode: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
         },
      });
      new swiper('.swiper2', {
        freeModeMomentum : false,
        slidesPerView :'auto',
        spaceBetween: 9,
        freeMode: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
      }),
        new swiper('.swiper3', {
          freeModeMomentum : false,
          slidesPerView :'auto',
          spaceBetween: 6,
          freeMode: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        });
    }
  }
</script>

<style scoped>
  .swiper-container {

    height: 100%;
  }
  .swiper1 .swiper-slide{
    width: 321px!important;
    height: 124px!important;
    background: red;

  }


  .swiper-slide img{

  }



  .swipe-img{
    height: 79px;width:100%;
  }
  .showBox{
    border-bottom: 6px solid #F5F5F6 ;text-align: center;
  }
  .showBox1{
    height: 72px;width: 70px;text-align: center;position: relative;
  }
 .shoutex{
   font-size: 14px;position: absolute;top: 42px;left: 7px;
 }
  .plan{
    margin-top:6px;
    line-height: 20px;
    border-bottom: 6px solid #F5F5F6 ;
  }
  .plan-box{margin-left: 13px}
  .plan-box h2 {font-size: 15px;}
  .plan-box p {font-size: 12px;}


  .video-exercises{padding-left: 13px;
    padding-top: 15px;border-bottom:2px solid #F5F5F6;}
  .video-exercises h2{font-size: 18px;font-weight: bold;}
  .video-exercises p{margin-top:23px ;margin-bottom: 15px}
  .swiper2 .swiper-slide{
     width: 202px!important;
     height: 100px!important;
   }
  .swiper3 .swiper-slide{
    width: 71px!important;
    height: 70px!important;
  }
  .morebox{
    text-align: center;padding: 22px 0;
  }
  .morebtn{
    height: 34px;width: 161px;line-height: 34px;font-size: 14px;
  }

  .pdleft{
    padding-left: 14px;
  }
  .self-training{box-sizing: border-box}
  .self-training h2{font-size: 18px;padding-top: 27px;padding-bottom: 15px}
  .midmag{margin: 11px 0}
  .vnctop{margin-top: 16px;margin-bottom: 17px}
  .tool{text-align: center;}
  .tool .vanc{height: 50px;width: 111px;border-radius: 10px;background: #F5F5F6 ;padding-top: 2px}
  .position,.time{text-align: center;line-height: 26px;}
   .vanc{width: 109px;height: 26px;border-radius: 15px;background: #F5F5F6;}
</style>
